Angular-এ কম্পোনেন্ট হলো একটি মৌলিক বিল্ডিং ব্লক যা অ্যাপ্লিকেশনের UI (User Interface) নির্ধারণ করে। প্রতিটি Angular অ্যাপ্লিকেশন এক বা একাধিক কম্পোনেন্টের সমন্বয়ে গঠিত। কম্পোনেন্ট একটি TypeScript ক্লাস, HTML টেমপ্লেট, এবং CSS স্টাইলশীট নিয়ে কাজ করে।
Angular কম্পোনেন্টের গঠন
একটি কম্পোনেন্ট তিনটি অংশ নিয়ে গঠিত:
- TypeScript Class: কম্পোনেন্টের লজিক এবং ডেটা ম্যানেজ করে।
- HTML Template: UI বা ভিজ্যুয়াল এলিমেন্টের স্ট্রাকচার নির্দেশ করে।
- CSS/SCSS: UI এর স্টাইল এবং লেআউট নির্ধারণ করে।
Angular কম্পোনেন্ট তৈরির ধাপ
Angular CLI ব্যবহার করে কম্পোনেন্ট তৈরি করা খুব সহজ। নিচে ধাপগুলো উল্লেখ করা হলো:
Step 1: নতুন কম্পোনেন্ট তৈরি
Angular CLI ব্যবহার করে নতুন কম্পোনেন্ট তৈরি করতে:
ng generate component component-name
অথবা সংক্ষেপে:
ng g c component-name
এটি একটি নতুন ফোল্ডার তৈরি করবে, যেখানে নিচের ফাইলগুলো থাকবে:
component-name.component.ts(TypeScript ক্লাস)component-name.component.html(HTML টেমপ্লেট)component-name.component.css(স্টাইলশীট)component-name.component.spec.ts(টেস্ট ফাইল)
Step 2: কম্পোনেন্টের কোড বিশ্লেষণ
// component-name.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-component-name', // HTML ট্যাগের নাম
templateUrl: './component-name.component.html', // HTML টেমপ্লেট
styleUrls: ['./component-name.component.css'] // স্টাইল ফাইল
})
export class ComponentNameComponent {
title: string = 'Hello, Angular Component!';
}
Step 3: কম্পোনেন্ট ব্যবহার
তৈরি হওয়া কম্পোনেন্ট ব্যবহার করতে চাইলে এটি app.module.ts ফাইলে ডিক্লেয়ার করতে হবে:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ComponentNameComponent } from './component-name/component-name.component';
@NgModule({
declarations: [
AppComponent,
ComponentNameComponent // নতুন কম্পোনেন্ট ডিক্লেয়ার
],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
এরপর, কম্পোনেন্টটি HTML ট্যাগ হিসেবে ব্যবহার করতে পারবেন:
<app-component-name></app-component-name>
Angular কম্পোনেন্টের গুরুত্বপূর্ণ বৈশিষ্ট্য
1. Selector
selectorহলো HTML ট্যাগ, যা ব্যবহার করে কম্পোনেন্টকে অ্যাপ্লিকেশনে যোগ করা হয়।- উদাহরণ:
<app-component-name></app-component-name>
2. Template এবং TemplateUrl
templateঅথবাtemplateUrlদ্বারা কম্পোনেন্টের HTML নির্ধারণ করা হয়।উদাহরণ:
@Component({ template: '<h1>Inline Template</h1>' })
3. StyleUrls এবং Styles
styleUrlsবাstylesদ্বারা কম্পোনেন্টের স্টাইল নির্ধারণ করা হয়।উদাহরণ:
@Component({ styles: ['h1 { color: blue; }'] })
4. Lifecycle Hooks
Angular কম্পোনেন্টে বিভিন্ন লাইফসাইকেল হুক থাকে, যেমন:
ngOnInit(): কম্পোনেন্ট লোড হওয়ার পরপরই চালু হয়।ngOnDestroy(): কম্পোনেন্ট ধ্বংস হওয়ার আগে চালু হয়।ngDoCheck(): পরিবর্তন শনাক্ত করার জন্য।
5. Data Binding
Angular কম্পোনেন্টে ডেটা এবং UI এর মধ্যে One-way এবং Two-way Binding করা যায়:
- One-way Binding: Data → View
- Two-way Binding: Data ↔ View
উদাহরণ: একটি বেসিক কম্পোনেন্ট
// hello-world.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-hello-world',
template: `<h1>{{ message }}</h1>`,
styles: [`h1 { color: green; }`]
})
export class HelloWorldComponent {
message: string = 'Welcome to Angular!';
}
HTML এ এটি ব্যবহার:
<app-hello-world></app-hello-world>
Angular কম্পোনেন্ট অ্যাপ্লিকেশন তৈরিতে একটি কেন্দ্রীয় ভূমিকা পালন করে। এটি কোড পুনরায় ব্যবহারযোগ্য, মডুলার এবং সহজে মেইনটেনযোগ্য করে তোলে।
Read more
